<!-- 目标追踪 -->
<template>
  <div class="targetTracking">
    <div class="common_bg"></div>
    <div class="container">
      <ul class="info_box">
        <li class="info_item">
          <div>
            <span>月度目标业绩({{monthUnit}})</span>
            <span>{{monthData.cumulativePerformance}}</span>
          </div>
        </li>
        <li class="info_item">
          <div>
            <span>本月完成业绩({{monthUnit}})</span>
            <span>{{monthData.monthCumulativePerformance}}</span>
          </div>
        </li>
        <li class="info_item">
          <div>
            <span>本月{{monthUnit2}}业绩完成率</span>
            <span>{{monthData.monthCumulativeComplete}}</span>
          </div>
        </li>
        <li class="info_item">
          <div>
            <span>本月销售冠军</span>
            <span>{{monthData.monthSalesChampionName}}</span>
          </div>
        </li>
      </ul>

      <div class="echarts_box">
        

        <div class="charts_item">
          <div class="change_box">
            <span :class="{'active': tab_id == 2}" @click="tabClick(2)">按人次</span>
            <span :class="{'active': tab_id == 1}" @click="tabClick(1)">按金额</span>
          </div>

          <div v-show="monthShowModel == 'double'">
            <div class="charts_title">目标业绩与完成业绩图</div>
            <div v-show="tab_id == 2" class="echarts" style="width:100%;height:280px;" id="monthPeople"></div>
            <div v-show="tab_id == 1" class="echarts" style="width:100%;height:280px;" id="monthPrice"></div>
          </div>

          <div v-show="monthShowModel == 'single'">
            <!-- <h3 class="title">{{monthProductEchartsName}}</h3> -->
            <!-- <h3 class="title">123123123</h3> -->
              <div class="echarts" style="width:100%;height:400px;" id="echartsProduct"></div>
          </div>

          <!-- <div v-show="showMoreData">
            <adminTable :tableHead="tableHeadMonthDetail" :tableData="tableDataMonthDetail"></adminTable>
          </div> -->

          <!-- <span v-show="tab_id == 2" class="show_more" @click="showMore">展开详情<van-icon name="play" /></span> -->
        </div>

        <div class="charts_item" v-show="monthShowModel == 'double'">
          <div class="charts_title">产品销售分布图</div>
          <div class="echarts" style="width:100%;height:280px;" id="monthRight"></div>
        </div>


      </div>
    </div>

    <div class="icon_place" @click="screenList.showSearch = true"></div>

    <screen :screenList="screenList" :screenData="screenData" @reset="reset" @searchData="searchData" @schoolChange="schoolChange"></screen>
  </div>
</template>

<style scoped>
.show_more {
  color: #8B9DFB;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: .266667rem;
}
.show_more i {
  transform: rotate(90deg);
  margin-left: .106667rem;
}
.change_box span.active {
  color: #fff;
  background: #8B9DFB;
}
.targetTracking .change_box {
  width: 3.786667rem;
  height: .666667rem;
  border-radius: .453333rem;
  font-size: 12px;
  color: #8B9DFB;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */
  box-sizing: border-box;
  margin-bottom: .346667rem;
}
.change_box span {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
  border: 1px solid #8B9DFB;
}
.change_box span:first-child {
  border-radius: .453333rem 0 0 .453333rem;
  border-right: none;
  margin-right: -1px;
}
.change_box span:last-child {
  border-radius: 0 .453333rem .453333rem 0;
}
.targetTracking .container {
  padding-top: .346667rem;
}
.targetTracking .info_box {
  display: flex;
  flex-wrap: wrap;
}
.targetTracking .info_item {
  font-size: 12px;
  color: #fff;
  width: 50%;
  display: flex;
  align-items: center;
  margin-bottom: .266667rem;
  /* justify-content: center; */
  padding: 0 0.433333rem;
  box-sizing: border-box;
}
.targetTracking .info_item:nth-child(2n) {
  /* justify-content: center; */
}
.targetTracking .info_item > div {
  margin-left: .266667rem;
}
.targetTracking .info_item:nth-child(1):before {
  content: '';
  width: .506667rem;
  height: .52rem;
  display: inline-block;
  background: url('../../../assets/img/icon2.png') 0 0 no-repeat;
  background-size: contain;
}
.targetTracking .info_item:nth-child(2):before {
  content: '';
  width: .586667rem;
  height: .586667rem;
  display: inline-block;
  background: url('../../../assets/img/icon3.png') 0 0 no-repeat;
  background-size: contain;
}
.targetTracking .info_item:nth-child(3):before {
  content: '';
  width: .586667rem;
  height: .533333rem;
  display: inline-block;
  background: url('../../../assets/img/icon4.png') 0 0 no-repeat;
  background-size: contain;
}
.targetTracking .info_item:nth-child(4):before {
  content: '';
  width: .586667rem;
  height: .586667rem;
  display: inline-block;
  background: url('../../../assets/img/icon1.png') 0 0 no-repeat;
  background-size: contain;
}
.targetTracking .info_item span {
  display: block;
}
</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
import adminTable from '@/components/assembly/adminTable'
import screen from '../../assembly/screen.vue'

let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("targetTracking");
export default {
  name: 'targetTracking',
  data() {
    return {
      jwtAuth: {},
      tab_id: 2,
      monthShowModel: 'double',
      showMoreData: false,
      monthData: {},
      monthUnit: '人',
      monthUnit2: '人次',

      tableHeadMonthDetail: {   
        data: [
          {
            name: '',
            key: 'weekName',
            align: 'center',
          },
          {
            name: '有效单(人)',
            key: 'validlist',
            align: 'center',
            children: [
              {
                name: '目标',
                key: 'validSigning',
                align: 'center',
                color: '#FFC834'
              },
              {
                name: '完成',
                key: 'completeValidSigning',
                align: 'center',
                color: '#80D784'
              }
            ]
          },
          {
            name: "试听(人)",
            key: "visit",
            align: "center",
            children: [
              {
                name: '目标',
                key: 'arriveOnVisit',
                align: 'center',
              },
              {
                name: '完成',
                key: 'completeArriveOnVisit',
                align: 'center',
              }
            ]
          },
          {
            name: "定金(人)",
            key: "earnestMoney",
            align: "center",
            children: [
              {
                name: '目标',
                key: 'earnestNumber',
                align: 'center',
              },
              {
                name: '完成',
                key: 'completeEarnestNumber',
                align: 'center',
              }
            ]
          },
          {
            name: "签单(人)",
            key: "fullMoney",
            align: "center",
            children: [
              {
                name: '目标',
                key: 'targetSigning',
                align: 'center',
              },
              {
                name: '完成',
                key: 'completeTargetSigning',
                align: 'center',
              }
            ]
          },
        ]
      },
      tableDataMonthDetail: [],
      searchMonth: {
        schoolId: "d4685f23bd5c4882aaef699b7b78330b",
        financialYear: "2020",
        financialMonth: "01",
        productId: [],
        employeesId: "",
        schoolName: "北辰福第中心",
      },
      // searchData: {},

      /* 筛选 */
      screenData: {
        school: '',
        schoolId: '',
        product: '',
        productId: [],
        salesPerson: '',
        salesPersonId: '',
        createStartTime: "",
      },
      screenList: {
        showSearch: false,
        dateType: 'year-month',
        minDate: new Date(2019, 0, 1),
        data: [
          {
            label: '校区',
            key: 'school',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          
          {
            label: '课程',
            key: 'product',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          
          {
            label: '员工',
            key: 'salesPerson',
            checkType: 'radio',
            bottomType: 'list',
            options: [],
          },
          {
            label: '时间',
            key: 'createStartTime',
            checkType: 'date',
            bottomType: 'date',
            options: [],
          },
          
          
        ],
      },
      activeScreenKey: '',

      schoolList: [],

      
    }
  },
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    this.queryAllSchool();
  },
  mounted() {
    this.initData();
  },
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),

    reset() {
      let data = {};
      this.queryAllProduct({});
      this.queryAllSalePerson({});
    },

    

    searchData(data) {
      console.log(data);
      // let searchData = {};
      this.searchMonth.schoolId = data.schoolId;
      this.searchMonth.productId = data.productId.length > 0 ? data.productId.split(',') : [];
      this.searchMonth.employeesId = data.salesPersonId;
      this.searchMonth.financialYear = data.createStartTime.split('-')[0];
      this.searchMonth.financialMonth = data.createStartTime.split('-')[1];

      this.screenList.showSearch = false;
      // this.initData(searchData)

      if(this.searchMonth.productId.length > 0) {
        this.monthShowModel = 'single'
        this.initMonthProduct(this.searchMonth, true);
      }else{
        this.monthShowModel = 'double'
        this.initData(this.searchMonth)
      }
      console.log(this.searchMonth)
    },

    tabClick(index) {
      this.tab_id = index;

      if(this.searchMonth.productId.length > 0) {
        this.monthShowModel = 'single'
        this.initMonthProduct(this.searchMonth);
      }else{
        this.monthShowModel = 'double'
        this.initData(this.searchMonth)
      }

      index == 1 ? this.monthUnit = '元' : this.monthUnit = '人'
      index == 1 ? this.monthUnit2 = '金额' : this.monthUnit2 = '人次'
    },

    initData(searchData) {
      let data = {}
      // let data = this.searchMonth;
      Object.assign(data, searchData);
      // this.getMonthTitle();

      data.type = this.tab_id;

      this.post({
        API: 'monthTrackingChartLeft',
        data: data
      }).then(res => {
        if(res.length > 0) {
          this.monthData = {
            cumulativePerformance: res[0].cumulativePerformance || 0,
            monthCumulativePerformance: res[0].monthCumulativePerformance || 0,
            monthCumulativeComplete: res[0].monthCumulativeComplete || 0,
            monthSalesChampionName: res[0].monthSalesChampionName,
            monthSalesChampionPrice: res[0].monthSalesChampionPrice,
          }
        }else{
          this.monthData = {
            cumulativePerformance: 0,
            monthCumulativePerformance: 0,
            monthCumulativeComplete:0,
            monthSalesChampionName: '',
            monthSalesChampionPrice: 0,
          }
        }
        
        this.echartsMonthPrice(res, true);
        this.echartsMonthPeople(res, true);

      }).catch(err => {
        // console.error(err);
      })

      this.post({
        API: 'monthTrackingChartRight',
        data: data
      }).then(res => {
        this.echartsMonthRight(res);
      }).catch(err => {
        console.error(err);
      })
      
    },

    initMonthProduct(searchData) {
      let data = {}
      data.type = this.tab_id;
      Object.assign(data, searchData);

      this.post({
        API: 'monthTrackingChartRightDisplay',
        data: data
      }).then(res => {
        // this.monthProductEchartsName = `${this.searchMonth.schoolName} ${this.searchMonth.financialYear || new Date().getFullYear()}年${this.searchMonth.financialMonth || new Date().getMonth() + 1}月 销售分布图`
        this.echartsMonthProduct(res, true);
      }).catch(err => {
        this.$message.error(err);
      })
      
    },

    showMore() {
      this.showMoreData = true;
      let data = {}
      Object.assign(data, this.searchMonth);
      data.productId = []
      if(this.searchMonth.productId) {
        data.productId.push(this.searchMonth.productId)
      }

      data.type = this.tabId_month;

      this.post({
        API: 'monthTrackingChartDetailsLeft',
        data: data,
      }).then(res => {
        // let arr = [];
        this.tableDataMonthDetail = [];
        res.forEach((item, index) => {
          let week1 = item.week.split('~')[0].split(' ')[0].split('-');
          week1 = week1[1] + '.' + week1[2];
          let week2 = item.week.split('~')[1].split(' ')[0].split('-');
          week2 = week2[1] + '.' + week2[2];
          let obj = {
            weekName : `第${index+1}期</br>${week1}-${week2}`,
            validlist: {
              // validSigning: `<span style="color: red;>${item.validSigning}</span>`,
              validSigning: item.validSigning,
              completeValidSigning: item.completeValidSigning
            },
            visit: {
              arriveOnVisit: item.arriveOnVisit,
              completeArriveOnVisit: item.completeArriveOnVisit
            },
            earnestMoney: {
              earnestNumber: item.earnestNumber,
              completeEarnestNumber: item.completeEarnestNumber
            },
            fullMoney: {
              targetSigning: item.targetSigning,
              completeTargetSigning: item.completeTargetSigning
            }
          } 
          this.tableDataMonthDetail.push(obj);
        })

        console.log(this.tableDataMonthDetail)

        this.tableDataMonthDetail.forEach(item => {
          item.earnestMoney.completeEarnestNumber = this.computedColor(item.earnestMoney.earnestNumber, item.earnestMoney.completeEarnestNumber)
          item.fullMoney.completeTargetSigning = this.computedColor(item.fullMoney.targetSigning, item.fullMoney.completeTargetSigning)
          item.validlist.completeValidSigning = this.computedColor(item.validlist.validSigning, item.validlist.completeValidSigning)
          item.visit.completeArriveOnVisit = this.computedColor(item.visit.arriveOnVisit, item.visit.completeArriveOnVisit)
        })

      }).catch(err => {
        this.$message.error(err);
      })
    },


    // 漏斗图
    echartsMonthPeople(data, bool) {
      let myChart = this.$echarts.init(document.getElementById("monthPeople"));
      let targetData = [];
      let completeData = [];

      if(data.length > 0) {
        data.forEach(item => {
          targetData.push(item.validSigning);
          targetData.push(item.arriveOnVisit);
          targetData.push(item.earnestNumber);
          targetData.push(item.targetSigning);

          completeData.push(item.completeValidSigning)
          completeData.push(item.completeArriveOnVisit)
          completeData.push(item.completeEarnestNumber)
          completeData.push(item.completeTargetSigning)
        })
      }
      
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c}"
        },
        title: [
          {
            text: '目标业绩',
            left: "16%",
            bottom: '10%',
            textStyle: {
              fontSize: 14,
              color: '#485465',
              fontWeight: 500,
            }
          },
          {
            text: '完成业绩',
            left: '64%',
            bottom: '10%',
            textStyle: {
              fontSize: 14,
              color: '#485465',
              fontWeight: 500,
            }
          }
        ],
        legend: {
          data: ['有效单(人)','试听(人)','定金(人)','签单(人)'],
          icon: 'circle',
          top: '5%',
          left: '5%',
          textStyle: {
            color: "#485465",
            fontSize: 11,
            fontWeight: 400,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 20,
        },
        series: [
          {
            name: '目标',
            type: 'funnel',
            left: '3%',
            width: '45%',
            sort: 'none',
            label: {
              normal: {
                position: 'inside',
                formatter: ' {c}'
              },
              emphasis: {
                position:'inside',
                formatter: ' {c}'
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: [
              {
                value: targetData[0],
                name: '有效单(人)',
                itemStyle: {
                  normal: {
                    color: "#74D6FE",
                  }
                },
                labelLine:{
                  show:true,
                  color: '#ccc'
                },
                label:{
                  show:true
                }
              },
              {
                value: targetData[1],
                name: '试听(人)',
                itemStyle: {
                  normal: {
                    color: "#92A1FD",
                  }
                },
              },
              {
                value: targetData[2],
                name: '定金(人)',
                itemStyle: {
                  normal: {
                    color: "#FBA56C",
                  }
                },
              },
              {
                value: targetData[3],
                name: '签单(人)',
                itemStyle: {
                  normal: {
                    color: "#FE8697",
                  }
                },
              },
            ]
          },
          {
            name: '完成',
            type: 'funnel',
            left: '51%',
            width: '45%',
            sort: 'none',
            label: {
              normal: {
                position: 'inside',
                formatter: '{c}',
                // textStyle: {
                //   color: '#fff'
                // }
              },
              emphasis: {
                position:'inside',
                formatter: '{c}'
              }
            },
            // label: {
            //   normal: {
            //     position: 'left'
            //   }
            // },
            data: [
                {
                  value: completeData[0],
                  name: '有效单(人)',
                  itemStyle: {
                    normal: {
                      color: "#74D6FE",
                    }
                  },
                },
                {
                  value: completeData[1],
                  name: '试听(人)',
                  itemStyle: {
                    normal: {
                      color: "#92A1FD",
                    }
                  },
                },
                {
                  value: completeData[2],
                  name: '定金(人)',
                  itemStyle: {
                    normal: {
                      color: "#FBA56C",
                    }
                  },
                },
                {
                  value: completeData[3],
                  name: '签单(人)',
                  itemStyle: {
                    normal: {
                      color: "#FE8697",
                    }
                  },
                },
            ]
          }
        ]
      }; 


      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });

      if(bool) {
        setTimeout(() => {
          myChart.resize();
        }, 0)
      }
    },
    echartsMonthPrice(data, bool) {
      let myChart = this.$echarts.init(document.getElementById("monthPrice"));
      let week = [];
      let targetData = [];
      let completeData = [];

      if(data.length > 0) {
        data[0].bmTargetMonthChildList.forEach((item, index) => {

          let week1 = item.week.split('~')[0].split(' ')[0].split('-');
          week1 = week1[1] + '.' + week1[2];
          let week2 = item.week.split('~')[1].split(' ')[0].split('-');
          week2 = week2[1] + '.' + week2[2];
          week.push(`第${index+1}期\n${week1}-${week2}`);
          // week.push(`第${index+1}期`);
          targetData.push(item.weekTargetPrice)
          completeData.push(item.weekTargetComplete)
        })
      }


      let option = {
          grid: {
            left: '15%',
            right: '2%'
          },
          legend: {       // 图例
            data: ['目标业绩(元)', '完成业绩(元)'],
            icon: 'circle',
            top: '5%',
            textStyle: {
              color: "#485465",
              fontSize: 11,
              fontWeight: 400,
            },
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 35,
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle: {
                color: 'rgba(150,150,150,0.15)',
              } 
            }
          },
          xAxis: {
            type: 'category',
            data: week,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {        // x轴 标签
              show: true,
              textStyle: {
                color: "#485465",
                fontSize: 10,
                fontWeight: 400
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '金额(元)',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {        // x轴 标签
              show: true,
              textStyle: {
                color: "#485465",
                fontSize: 10,
                fontWeight: 400
              }
            }
          },
          series: [
            {
              name: '目标业绩(元)',
              data: targetData,
              type: 'line',
              smooth: 0.4,
              itemStyle: {
                normal: {
                  color: "#74D7FE",
                }
              },
            },
            {
              name: '完成业绩(元)',
              data: completeData,
              type: 'line',
              smooth: 0.4,
              itemStyle: {
                normal: {
                  color: "#FF98A4",
                }
              },
            },
          ]
      };


      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });

      if(bool) {
        setTimeout(() => {
          myChart.resize();
        }, 0)
      }
    },

    echartsMonthRight(data, bool) {
      
      let myChart = this.$echarts.init(document.getElementById("monthRight"));
      
      let week = [];
      let productName = []
      let barColor = ['#74D7FE','#949DFD', '#FC84A9', '#FBB78A', '#5AE8AC', '#71D9E1', '#D690E6', '#FE7888']
      let barColor2 = ['#FE7888','#D690E6','#71D9E1','#5AE8AC','#FBB78A','#FC84A9','#949DFD', '#74D7FE',]


      let legendArr = [
        ['人次(人)'],
        ['金额(元)']
      ]
      let legendUnit = []

      if(this.tab_id == 1) {
        legendUnit = legendArr[1]
      }else{
        legendUnit = legendArr[0]
      }

      let option = {
        grid: {
          left: this.gridLeft,
          right: '2%'
        },
        legend: {       // 图例
          data: productName,
          icon: 'circle',
          type: 'scroll',
          // orient: 'vertical',
          top: '3%',
          textStyle: {
            color: "#485465",
            fontSize: 12,
            fontWeight: 400,
          },
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 35,
        },
        tooltip : {
          trigger: 'axis',
          show: true,
          position: [0,0],
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: 'rgba(150,150,150,0.15)',
            } 
          }
        },
        xAxis: {
          type: 'category',
          data: week,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {        // x轴 标签
            show: true,
            textStyle: {
              color: "#485465",
              fontSize: 10,
              fontWeight: 400
            },
          }
        },
        yAxis: {
          type: 'value',
          name: legendUnit,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {        // x轴 标签
            show: true,
            textStyle: {
              color: "#485465",
              fontSize: 11,
              fontWeight: 400
            }
          }
        },
        series : [
          
        ]
      };

      
      if(data.length > 0) {
        data.forEach((item, index) => {
          productName.push(item.productName);
          let weekData = [];
          let weekDataTarget = [];
          item.bmTargetMonthChildList.forEach((weekItem, weekIndex) => {
            if(index == 0) {
              let week1 = weekItem.week.split('~')[0].split(' ')[0].split('-');
              week1 = week1[1] + '.' + week1[2];
              let week2 = weekItem.week.split('~')[1].split(' ')[0].split('-');
              week2 = week2[1] + '.' + week2[2];
              week.push(`第${weekIndex+1}期\n${week1}-${week2}`);
              // week.push(`第${weekIndex+1}期`);
            }
            weekData.push(weekItem.weekTargetPrice)
            weekDataTarget.push(weekItem.weekTargetComplete)
          })

          let obj = {
            name: item.productName,
            type:'bar',
            stack: '产品',
            barWidth : 20,
            data:weekData,
            itemStyle: {
              color: barColor[index]
            }
          }
          let targetObj = {
            name: `(目标)${item.productName}`,
            type:'bar',
            stack: '产品目标',
            barWidth : 20,
            barGap: 0,
            data:weekDataTarget,
            itemStyle: {
              color: barColor2[index]
            }
          }
          option.series.push(obj);
          option.series.push(targetObj);
        })

      }else{
        option = {
          legend: {       // 图例
            data: [' ', ' '],
          },
          tooltip : {
            trigger: 'axis',
            show: false,
          },
          xAxis: {
            type: 'category',
            data: [' ', ' '],
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {        // x轴 标签
              show: true,
              textStyle: {
                color: "#485465",
                fontSize: 12,
                fontWeight: 400
              }
            }
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            
          },
          series : [
            {
              name: '',
              type:'bar',
              stack: '产品',
              barWidth : 0.00001,
              data:[0, 0, 0, 0, 0],
            },
            {
              name: '',
              type:'bar',
              stack: '产品目标',
              barWidth : 0.00001,
              data:[0, 0, 0, 0, 0],
            }
          ]
        };


        
      }
      
      myChart.setOption(option, true);
      
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      
    },


    
    // 单产品图
    echartsMonthProduct(data, bool) {
      let myChart = this.$echarts.init(document.getElementById("echartsProduct"));
      console.log(data)
      let peopleList = []
      let weekName = []
      let totalData = []

      let option = {
        color: ["#FED976", "#C6E1FB", '#FFD1B3', '#A1DAA4', '#A9C2F4', '#FC84A9' ],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: 'rgba(150,150,150,0.15)',
            } 
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        dataZoom:[{
  　　　　 type: 'slider',//图表下方的伸缩条
  　　　　 show : true, //是否显示
  　　　　 realtime : true, //拖动时，是否实时更新系列的视图
  　　　　 start : 0, //伸缩条开始位置（1-100），可以随时更改
  　　　　 end : 40, //伸缩条结束位置（1-100），可以随时更改
  　　　 }],
        legend: {
          data: peopleList,
          type: 'scroll',
          icon: 'circle',
          right: '8%',
          textStyle: {
            color: "#485465",
            fontSize: 12,
            fontWeight: 400,
          },
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 20,
        },
        xAxis : [
          {
            type : 'category',
            data : weekName,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
          }
        ],
        yAxis: [{
          "type": "value",
          "axisLine": {
              lineStyle: {
                  color: '#90979c'
              }
          },
          "axisTick": {
              "show": false
          },
          "axisLabel": {
              "interval": 0,
          },
        }],
          
        series: [
          {
            name: "合计",
            type: "line",
            symbolSize:10,
            symbol:'circle',
            smooth: 0.4,
            lineStyle: {
              width: 1.5
            },
            itemStyle: {
              normal: {
                color: "#fec097",
              }
            },
            data: totalData
          },
        ]
      }
     
   
      this.monthData = {
        cumulativePerformance: data.cumulativePerformance || 0,
        monthCumulativePerformance: data.monthCumulativePerformance || 0,
        monthCumulativeComplete: data.monthCumulativeComplete || 0,
        monthSalesChampionName: data.monthSalesChampionName,
        monthSalesChampionPrice: '',  // 冠军金额
      }

      if(data.trackingChartRightDisplayOutList) {
        data.trackingChartRightDisplayOutList.forEach((item, index) => {
          // console.log(item)
          peopleList.push(item.personName)
          
          
          let peopleData = [];
          let peopleTargetData = []
          item.bmTargetMonthChildList.forEach((childItem, childIndex) => {
            // console.log(childItem)
            peopleData.push(childItem.weekTargetPrice)
            peopleTargetData.push(childItem.weekTargetComplete)
          })

          console.log(item.personName);
          
          let obj = {
            name: item.personName,
            type:'bar',
            // stack: item.personName,
            barGap: 0,
            z: 1,
            // barWidth: 20,
            data: peopleData,
          }
          let targetObj = {
            name: '(目标)' + item.personName,
            type:'bar',
            // stack: item.personName,
            // barGap: '-100%',
            z: 0,
            // barWidth: 20,
            color: '#EDF1FF',
            data: peopleTargetData,
          }
          
          option.series.push(obj);
          option.series.push(targetObj);
        })
        peopleList.push('合计')

        // 每一期
        data.trackingChartRightDisplayOutList[0].bmTargetMonthChildList.forEach((item, index) => {
          let week1 = item.week.split('~')[0].split(' ')[0].split('-');
          week1 = week1[1] + '.' + week1[2];
          let week2 = item.week.split('~')[1].split(' ')[0].split('-');
          week2 = week2[1] + '.' + week2[2];

          weekName.push(`第${index+1}期(${week1}-${week2})`);
          
        })

        
        data.bmTargetMonthChildList.forEach(item => {
          if(this.searchMonth.employeesId == '') {
            totalData.push(item.weekTargetPrice);
          }else{
            totalData = [0, 0]
            peopleList[peopleList.length - 1] = ''
          }

          // console.log(totalData)
        })
      }else{
        peopleList = []
        option = {
          color: ["#FED976", "#C6E1FB", '#FFD1B3', '#A1DAA4', '#A9C2F4', '#FC84A9' ],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle: {
                color: 'rgba(150,150,150,0.15)',
              } 
            }
          },
          legend: {
            data: peopleList,
            icon: 'circle',
            // top: '5%',
            right: '4%',
            textStyle: {
              color: "#485465",
              fontSize: 12,
              fontWeight: 400,
            },
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 20,
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          dataZoom:[{
    　　　　type: 'slider',//图表下方的伸缩条
    　　　　show : true, //是否显示
    　　　　realtime : true, //拖动时，是否实时更新系列的视图
    　　　　start : 0, //伸缩条开始位置（1-100），可以随时更改
    　　　　end : 100, //伸缩条结束位置（1-100），可以随时更改
    　　　}],
          xAxis : [
            {
              type : 'category',
              data : weekName,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
            }
          ],
          yAxis : [
            {
              type : 'value',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
            },
            {
              type: 'value',
              name: '合计',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  fontSize: 12,
                  color: '#fec097',
                }
              }
            }
          ],
          series : [
            {
              name: '',
              type:'bar',
              data: [0]
            },{
              name: '',
              type:'line',
              data: [0]
            }
          ]
        }; 
      }


      myChart.clear();
      myChart.setOption(option, true);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
      if(bool) {
        setTimeout(() => {
          myChart.resize();
        }, 0)
      }

      // myChart.on('dataZoom',function(params) {
      //   console.log('aaaa')
      //   console.log(myChart.getModel().option)
      //   var startValue = myChart.getModel().option.dataZoom[0].startValue;
      //   var endValue = myChart.getModel().option.dataZoom[0].endValue;
      //   //起始X轴
      //   var start = myChart.getModel().option.xAxis[0].data[startValue];
      //   console.log("========start========="+start);
      //   //结束X轴
      //   var end = myChart.getModel().option.xAxis[0].data[endValue];
      //   console.log("========end========="+end);
      // });

      
    },

    schoolChange(data) {
      console.log(data);
      this.queryAllSalePerson(data);
      this.queryAllProduct(data);
    },


    queryAllSalePerson(data) {
      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })

      let schoolId = '';
      if(!data.schoolId) {
        schoolId = schoolIdList.join(',');
      }else{
        schoolId = data.schoolId
      }

      this.formGet({
        API: 'queryPersonBySchoolId',
        data: {
          positionCode: '2,5',
          schoolId: schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.employeesId;
          val.label = val.employeesName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'salesPerson') {
            item.options = res;
          }
        })
      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    queryAllSchool(btnId) {
      let accountId
      this.jwtAuth.schoolId == '' ? accountId = '' : accountId = this.jwtAuth.accountId
      
      this.post({ 
        API: 'queryAllSchool',
        data: {
          accountId: accountId,
          menuId: btnId || 'studentManagement',
          schoolIds: this.jwtAuth.schoolId.split(','),
        }
      }).then(res => {
        res = res.filter(val => {
          return val.schoolId !== '';
        });
        res.map((val) => {
          val.label = val.schoolName;
          val.id = val.schoolId;
        })

        if(btnId) {
          this.powerSchoolList = res
        }else{
          this.schoolList = res
          // this.initData();
        }

        
        let data = {};
        console.log(data);
        this.queryAllProduct({});
        this.queryAllSalePerson({});

        this.screenList.data.forEach(item => {
          if(item.key == 'school') {
            item.options = this.schoolList;
          }
        })
      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    queryAllProduct(data) {
      let schoolIdList = []
      this.schoolList.forEach(item => {
        schoolIdList.push(item.schoolId);
      })

      let schoolId = '';
      if(!data.schoolId) {
        schoolId = schoolIdList.join(',');
      }else{
        schoolId = data.schoolId
      }

      this.formGet({
        API: 'queryProductBySchoolId',
        data: {
          schoolId: schoolId,
        }
      }).then(res => {
        res.map((val) => {
          val.id = val.productId;
          val.label = val.productName;
        })
        this.screenList.data.forEach(item => {
          if(item.key == 'product') {
            item.options = res;
          }
        })

      }).catch(err => {
        this.$toast.fail(err);
      })
    },
  },


  computed: {
    gridLeft() {
      if(this.tab_id == 2) {
        return '7%'
      }else{
        return "15%"
      }
    }
  },

  
  components: {
    adminTable,
    screen,
  },
}
</script>